<template>
	<div>
		<a-list itemLayout="horizontal" :dataSource="data">
			<a-list-item slot="renderItem" slot-scope="item, index" :key="index">
				<a-list-item-meta>
					<a slot="title">{{ item.title }}</a>
					<span slot="description">
						<span class="security-list-description">{{ item.description }}</span>
						<span v-if="item.value"> : </span>
						<span class="security-list-value">{{ item.value }}</span>
					</span>
				</a-list-item-meta>
				<template v-if="item.actions">
					<a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a>
				</template>
			</a-list-item>
		</a-list>
		<pwd-form
			ref="createModal"
			:visible="visible"
			:loading="confirmLoading"
			:model="mdl"
			@cancel="handleCancel()"
			@ok="handleOk"
		/>
	</div>
</template>

<script>
import pwdForm from './pwdModal';

export default {
	components: {
		pwdForm,
	},
	data() {
		return {
			data: [
				{
					title: '账户密码',
					description: '当前密码强度',
					value: '强',
					actions: {
						title: '修改',
						callback: () => {
							this.visible = true;
						},
					},
				},
				// { title: '密保手机', description: '已绑定手机', value: '138****8222', actions: { title: '修改', callback: () => { this.$message.success('This is a message of success') } } },
				// { title: '密保问题', description: '未设置密保问题，密保问题可有效保护账户安全', value: '', actions: { title: '设置', callback: () => { this.$message.error('This is a message of error') } } },
				// { title: '备用邮箱', description: '已绑定邮箱', value: 'ant***sign.com', actions: { title: '修改', callback: () => { this.$message.warning('This is message of warning') } } },
				// { title: 'MFA 设备', description: '未绑定 MFA 设备，绑定后，可以进行二次确认', value: '', actions: { title: '绑定', callback: () => { this.$message.info('This is a normal message') } } }
			],
			visible: false,
			confirmLoading: false,
			mdl: null,
		};
	},
	methods: {
		// 取消
		handleCancel(type) {
			let form = {};
			this.visible = false;
			form = this.$refs.createModal.form;
			form.resetFields(); // 清理表单数据（可不做）
		},
		// 表单提交
		handleOk() {
			const form = this.$refs.createModal.form;
			// this.confirmLoading = true
			form.validateFields((errors, values) => {
				if (!errors) {
					if (values.password === values.password2) {
						this.$post('/mdata/user/updatePassword', values)
							.then((res) => {
								if (res.statusCode === 200) {
									this.visible = false;
									this.confirmLoading = false;
									// 重置表单数据
									form.resetFields();
									// 刷新表格
									this.$message.info('修改成功');
								} else {
									this.confirmLoading = false;
									this.$message.error('修改失败');
								}
							})
							.catch((err) => {
								console.log(err);
							});
					}
				} else {
					this.confirmLoading = false;
				}
			});
		},
	},
};
</script>

<style scoped></style>
